<template>
  <el-drawer :visible.sync="showDrawer" modal-append-to-body append-to-body size="80vw" :close-on-click-modal="false"
    @close="handleClose">
    <div slot="title" style="cursor: pointer;display: flex;">
      <i class="el-icon-arrow-left" @click="showDrawer = false"></i>
      <el-row class="card-title" v-if="rowData">
        <span>年级:{{rowData.grade_name}}</span>
        <span>姓名:{{rowData.name}}</span>
      </el-row>
      <h2 style="text-align: center;flex: 1; margin-left: -20%;">运动轨迹</h2>
    </div>
    <el-card shadow="never" body-style="padding: 10px 20px">
      <el-row>
        日期:&nbsp;&nbsp;&nbsp;
        <el-date-picker v-model="value1" type="date" @change="getLocation" value-format="yyyy-MM-dd" placeholder="选择日期">
        </el-date-picker>
      </el-row>
      <div class="carMap">
        <div class="carMapRight">
          <Mapview v-if="mapShow" ref="carMap" :belongTime.sync="value1" :lnglat.sync="lnglat"
            :student_info.sync="student_info" :location_list.sync="location_list" :week_trip.sync="week_trip"
            :day_trip.sync="day_trip" @getLocationInfo='getResLocation'></Mapview>
        </div>
      </div>
    </el-card>
  </el-drawer>
</template>
<script>
  import Mapview from "./MapContainer.vue";
  export default {
    name: "trajectory",
    components: {
      Mapview
    },
    props: {
      // 弹窗是否打开
      visibleDrawer: Boolean,
      // 修改回显的数据
      rowData: Object,
    },
    data() {
      return {
        // showDrawer: false,
        mapShow: false,
        value1: '',
        student_info: {},
        location_list: [],
        day_trip: {},
        week_trip: {},
        lnglat: [],
        initDate: null
      }
    },
    watch: {
      visibleDrawer() {
        if (this.rowData) {
          this.initDate = this.$formatDate(new Date())
          this.value1 = this.initDate
          this.getLocation()
        }
      },
    },
    computed: {
      showDrawer: {
        set(val) {
          this.$emit("closeDrawer", val)
        },
        get() {
          return this.visibleDrawer
        }

      }
    },
    created() {},
    methods: {
      handleClose() {
        this.showDrawer = false;
      },
      getResLocation() {
        this.$http
          .get("/student/sendCommand", {
            params: {
              imei: this.rowData.imei
            }
          })
          .then(res => {
            this.$message.success(res.data.msg);
          })
          .catch(e => {
            this.$message.error(e.message);
          });
      },
      getLocation() {
        this.lnglat = []
        this.value1 = this.value1 ? this.value1 : this.initDate
        this.$http
          .get("/student/getLocation", {
            params: {
              imei: this.rowData.imei,
              belong_time: this.value1
            }
          })
          .then(res => {
            // console.log("res.data.data",res.data.data)
            this.student_info = res.data.data.student_info === null ? {} : res.data.data.student_info
            this.location_list = res.data.data.location_list
            this.day_trip = res.data.data.day_trip === null ? {} : res.data.data.day_trip
            this.week_trip = res.data.data.week_trip
            this.location_list.length > 0 && this.location_list.map(item => {
              this.lnglat.push({
                lng: item.lng,
                lat: item.lat
              })
            })
            console.log("this.lnglat.", this.lnglat)
            this.mapShow = true;
          })
          .catch(e => {
            this.$message.error(e.message);
          });
      }
    }

  }
</script>
<style scoped>
  .card-title {
    padding: 0 20px;
  }

  .card-title span {
    margin-right: 30px;
  }

  .carMap {
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
  }

  .carMapRight {
    width: 100%;
    height: 88vh;
  }
</style>
